<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./vue.js"></script>
</head>
<body>
    <div class="register">
        <div class="inputBox">
            <input type="text" placeholder="用户名" v-model="name">
        </div>
        <div class="inputBox">
            <input type="text" placeholder="手机号码" v-model="phone">
        </div>
        <div class="inputBox">
            <input type="text" placeholder="短信验证码" v-model="code">
            <a href="javascript:;" @click="sendCode ">{{isRun?`${runTime}s后重新发送` : `获取验证码`}}</a>
        </div>
        <div class="inputBox">
            <input type="text" placeholder="登录密码" v-model="password">
        </div>
        <div class="inputBox">
            <input type="text" placeholder="支付密码" v-model="passwordPay">
        </div>
        <button class="submit" @click="registerHandle">立即注册</button>
        <router-link to="/login" class="changeBtn">已有账号，去登录</router-link>
    </div>
</body>
<script>
    import api from "../api/index";
    import md5 from "blueimp-md5";

    export default {
        data(){
            return {
               name:"",
               phone:"" ,
               code:"",
               password:"",
               passwordPay:"",
               //倒计时
               isRun:false,
               runTime:30
            }
        },
        methods:{
            //发送验证码
            async sendCode(){
                if(this.isRun) return;
                // 1.校验手机格式是否正确,为了防止不必要的服务器请求，防止xss攻击（输入恶意的js或sql脚本）
                if(!/^1\d{10}$/.test(this.phone)){
                    alert("手机号码格式不正确")
                    return;
                }
                //2.验证手机号是否被注册-》向后台发送
               let data=await api.personal.phone(this.phone);
               if(parseInt(data.code)===0){
                   alert("手机号码已经被注册，请选择登录或者忘记密码~~~")
                   return;//不让程序继续向下执行
               }
               //3.通知服务器发送验证码
               data=await api.personal.code(this.phone);
               if(parseInt(data.code)===1){
                   alert("当前网络繁忙，请稍后重试~~~")
                   return;
               }
               //开启倒计时
                this.isRun=true
                this.autoTimer=setInterval(()=>{
                    if(this.runTime ===0){
                        this.runTime=30;
                        this.isRun=false;
                        clearInterval(this.autoTimer)
                        return;
                    }
                    this.runTime--
                },1000)
            },
            //立即注册
            async registerHandle(){
                //1.表单校验
                //2.验证码的有效性，发请求
               let data=await api.personal.checkCode(this.phone,this.code);
               if(parseInt(data.code) !==0){
                    alert("验证码不正确");
                    return;
               }
               //完成注册
               data=await api.personal.register({
                   name:this.name,
                   phone:this.phone,
                   password:md5(this.password),
                   passwordPay:md5(this.passwordPay)
               });
               if(parseInt(data.code) !==0){
                   alert("网络繁忙，请稍后再试");
                   return;
               }
               alert("恭喜您，注册成功")
               this.$router.push('/login');
               
            },
        }
    }
</script>
</html>